<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>CSS Framework | Raxan User Guide</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad('javascript','html','php');
    </script>

</head>

<body>
    <div class="container c48 prepend-top">
        <h2 class="bottom">Raxan User Guide</h2>
        <div class="navbar">
            <div class="lf"><div class="rt"><div class="md">
                <ul>
                    <li><a href="../index.html" title="The Rich Ajax, CSS &amp; PHP Framework" >Home</a></li>
                    <li><a href="table-of-contents.html" title="Blog Posts" >Table Of Contents</a></li>
                </ul>
            </div></div></div>
        </div>
        <div class="prepend1 append1"><h2>The CSS Framework</h2>

<p>With Raxan's CSS framework you can easily go from simple fixed-width designs to complex multi-column elastic layouts with just a few lines of html code. No Javascript is required to accomplish multi-column layouts, thus making it easier to create nice looking, accessible web pages in minutes.</p>

<p>The framework basically provides a set of style sheet classes, typographic text and a grid layout system that can be used to create complex designs and multi-column web pages. Each cell within the grid is 20px wide and 20px long. The width and/or height of a combination of cells, can be assigned to any html element by using the CSS classes c1, c2,...,c50, c60, c70, c80, c80,c100 and r1, r2,...,r50 respectively, where the numbers represents the number of columns or the number of rows. The default grid contains 100 columns and 50 rows (2000px X 1000px)</p>

<h3>Your First Raxan CSS Web Page</h3>

<p>Creating a web page with Raxan is very simple. You can use any HTML or Text Editor (even Notepad) to create and modify the web pages.</p>

<p>Let's start off by creating an empty web page called <strong>mywebpage.html</strong> inside the folder where you have unzipped the library files (e.g. c:\development\raxanfiles). Now open the file <strong>mywebpage.html</strong> inside your favorite text or html editor to begin editing.</p>

<p>Normally, you would start adding your <html> tags to the page, but to make life a little simpler, we have added a web page template that you can use as a starting point when creating a new page. To copy the content of the page template, use your text or html editor to open the file raxan/templates/page.html, then copy it's content into mywebpage.html.</p>

<p>Here's the content of the page.html file:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
    &lt;title&gt;Your Title Here...&lt;/title&gt;
    &lt;link href="raxan/styles/master.css" rel="stylesheet" type="text/css" /&gt;
    &lt;!--[if IE]&gt;
        &lt;link rel="stylesheet" href="raxan/styles/master.ie.css" type="text/css"&gt;
    &lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
    Put your content here...
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Note: Replace "Your Title Here..." with a title for your page and "Put your content here..." with the html content for the page.</p>

<p>In the above html code you will notice that there are two <link> tags present within the <head> of the page. This is to include the master.css style sheet (and master.ie.css for Internet Explorer). These files are optional and you can remove them to include your own style sheets but if you would like to take advantage of the CSS framework classes then you will be need to include the master style sheets.</p>

<p>Copy and paste the following code in your new web page replacing the "Put your content here..." text:</p>

<pre><code>&lt;div&gt;
        My First Raxan web page
&lt;/div&gt;
</code></pre>

<p>Save the file and view it inside your web browser. Note: You can view the file inside a browser by double clicking on the filename in the file folder.</p>

<p>Viewing the file inside the browser appears flat and normal (without any styling). To change this, modify the code to reflect the following:</p>

<pre><code>&lt;div class="container c30 pad"&gt;
    &lt;h1&gt;My First Raxan web page&lt;/h1&gt;
    &lt;hr /&gt;
&lt;/div&gt;
</code></pre>

<p>Save the file and refresh your browser to see the changes. The page should appear centered with a nice looking title.</p>

<p>What we have done is to convert the &lt;div&gt; into a container with a width of 30 columns or cells (20*30 = 600 pixel) and a 10 pixel padding around the &lt;div&gt; content.</p>

<p>Our next step is to add a box with the words "Hello World" inside it. To do this, simply create a div and assign the alert class to it:</p>

<pre><code>&lt;div class="container c30 pad"&gt;
    &lt;h1&gt;My First Raxan web page&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div class="alert"&gt;
        Hello World!
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Save the file and refresh your browser to see the changes.</p>

<p>To become a bit more creative try modifying your code to reflect the following:</p>

<pre><code>&lt;div class="container c30 success pad"&gt;
    &lt;h1 class="box-title"&gt;My First Raxan web page&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div class="column alert c10"&gt;
        Hello World!
    &lt;/div&gt;
    &lt;div class="column  info c10"&gt;
        This is my first web page.
    &lt;/div&gt;
    &lt;br class="clear" /&gt;&lt;!-- use to clear the column float --&gt;
&lt;/div&gt;
</code></pre>

<p>We've only created a simple web page with a title and some basic CSS classes. There's no telling what you can do with a little creativity.</p>

<h3>Additional CSS Classes</h3>

<p>To learn more about the full list of CSS classes available within the Raxan CSS framework, see the <a href="table-of-contents.html">CSS Class Reference</a>.</p>
</div>
        <div class="tpb pad" style="text-align:right">
            <a href="table-of-contents.html" class="quiet">Back to Table of Content</a>
        </div>
    </div>
</body>

</html>

